import { useGanttStore } from '@/store/modules/ganttStore';
const store = useGanttStore();

// 自定义项插槽函数
const itemSlot = (vido: any, props: any) => {
  const { html, onChange, update } = vido;

  let imageSrc = '';
  let description = '';
  onChange(newProps => {
    props = newProps;
    if (!props || !props.item) return;
    imageSrc = props.item.img;
    description = props.item.description;
    update();
  });

  return content => html`
    <div
      class="item-image"
      style="background:url(${imageSrc}),transparent;flex-shrink:0;border-radius:100%;width:34px;height:34px;vertical-align: middle;background-size: 100%;margin: 4px 11px 0px 0px;"
    ></div>
    <div class="item-text">
      <div class="item-label">${content}</div>
      <div
        class="item-description"
        style="font-size:11px;margin-top:2px;color:#fffffff0;line-height:1em;"
      >
        ${description}
      </div>
    </div>
  `;
};

// 自定义行插槽函数
const rowSlot = (vido: any, props: any) => {
  const { html, onChange, update, api } = vido;

  let img = '';
  onChange(newProps => {
    props = newProps;
    if (!props || !props.row) return;
    img = props.row.img;
    update();
  });

  return content => {
    if (!props || !props.column) return content;
    return api.sourceID(props.column.id) === 'label'
      ? html`
          <div class="row-content-wrapper" style="display:flex">
            <div class="row-content" style="flex-grow:1;">${content}</div>
            <div
              class="row-image"
              style="background:url(${img}),transparent;border-radius:100%;width:34px;height:34px;vertical-align: middle;background-size: 100%;margin: auto 10px;flex-shrink:0;"
            ></div>
          </div>
        `
      : content;
  };
};

// 自定义项插槽函数
const myItemSlot = (vido: any, props: any) => {
  const { onChange } = vido;

  // 点击事件处理函数
  function onClick() {
    // console.log('Item click from slot', props.item);
  }

  // 双击事件处理函数
  function onDblClick() {
    store.showDetailDialog();
    console.log('Item dblclick from slot', props.item);
  }

  // 监听属性变化
  onChange(changedProps => {
    // 如果当前元素被重用来显示其他项数据，更新数据以便点击时显示正确的信息
    props = changedProps;
  });

  // 返回渲染函数
  return content =>
    vido.html`<div class="my-item-wrapper" @click=${onClick} @dblclick=${onDblClick} style="width:100%;display:flex;overflow:hidden;pointer-events:none;">${content}</div>`;
};

// 自定义生日行插槽函数
const myBirthdayRowSlot = (vido: any, props: any) => {
  const { onChange, html, update, api, state } = vido;

  let birthdayContent = [] as any[];
  // 监听属性变化
  onChange(changedProps => {
    props = changedProps;
    if (!props || !props.row || !props.row.birthday) {
      birthdayContent = [];
      return update();
    }
    const configTime = state.get('config.chart.time');
    birthdayContent = [];
    // 生成生日内容
    for (const birthday of props.row.birthday) {
      // 如果生日日期不在当前视图范围内，跳过
      if (birthday.to < configTime.leftGlobal || birthday.from > configTime.rightGlobal) continue;
      const leftPx = api.time.getViewOffsetPxFromDates(api.time.date(birthday.from));
      const rightPx = api.time.getViewOffsetPxFromDates(api.time.date(birthday.to));
      const widthPx = rightPx - leftPx - 1;
      if (widthPx < 0) continue;
      let textAlign = 'left';
      if (widthPx <= 100) textAlign = 'center';
      birthdayContent.push(html`
        <div
          style="position:absolute;left:${leftPx}px;width:${widthPx}px;height:14px;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;font-size:11px;background:#F9B32F;color:white;text-align:${textAlign};"
        >
          🎁 Birthday
        </div>
      `);
    }
    update();
  });

  // 返回渲染函数
  return content => html`
    ${birthdayContent}${content}
  `;
};

// 自定义休假行插槽函数
const myVacationRowSlot = (vido: any, props: any) => {
  const { onChange, html, update, api, state } = vido;

  let vacationContent = [] as any[];
  // 监听属性变化
  onChange(changedProps => {
    props = changedProps;
    if (!props || !props.row || !props.row.vacations) {
      vacationContent = [];
      return update();
    }
    const configTime = state.get('config.chart.time');
    vacationContent = [];
    // 生成休假内容
    for (const vacation of props.row.vacations) {
      // 如果休假日期不在当前视图范围内，跳过
      if (vacation.to < configTime.leftGlobal || vacation.from > configTime.rightGlobal) continue;
      const leftPx = api.time.getViewOffsetPxFromDates(api.time.date(vacation.from));
      const rightPx = api.time.getViewOffsetPxFromDates(api.time.date(vacation.to));
      const widthPx = rightPx - leftPx - 1;
      if (widthPx < 0) continue;
      let textAlign = 'left';
      if (widthPx <= 100) textAlign = 'center';
      vacationContent.push(html`
        <div
          style="position:absolute;left:${leftPx}px;width:${widthPx}px;height:14px;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;font-size:11px;background:#A0A0A0;color:white;text-align:${textAlign};"
        >
          Vacation
        </div>
      `);
    }
    update();
  });

  // 返回渲染函数
  return content => html`
    ${vacationContent}${content}
  `;
};

export function useGanttSlots() {
  const loadSlots = () => ({
    'chart-timeline-items-row-item': {
      content: [itemSlot],
      inner: [myItemSlot]
    }, // 项插槽
    'list-column-row': { content: [rowSlot] }, // 行插槽
    'chart-timeline-grid-row': {
      content: [myBirthdayRowSlot, myVacationRowSlot]
    } // 网格行插槽
  });
  return { loadSlots };
}
